<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box{width: 600px;border: solid 1px black;margin: 0 auto;position: relative;}
        .title h2{margin: 10px 0;background: #aaa;line-height: 60px;}
        .cont p{margin: 0;position: absolute;left: 0;top:0;width: 300px;background: #ccc;display: none}
    </style>
</head>
<body>
    <div id="box">
        <div class="title">
            <h2>新闻标题1新闻标题1新闻标题1</h2>
            <h2>新闻标题2新闻标题2新闻标题2</h2>
        </div>
        <div class="cont">
            <p>新闻1的内容新闻1的内容新闻1的内容新闻1的内容新闻1的内容新闻1的内容新闻1的内容新闻</p>
            <p>新闻222222的内容222的内容222的内容222的内容222的内容222的内容222的内容222的内容222的内容222的内容222的内容222的内容222的内容222的内容222的内容222的内容222的内容222的内容222的内容222的内容</p>
        </div>
    </div>
</body>
<script>
    var ah2 = document.querySelectorAll(".title h2");
    var ap = document.querySelectorAll(".cont p");

    // 遍历h2
    for(var i=0;i<ah2.length;i++){
        // 提前给h2绑定索引
        ah2[i].index = i;
        // 鼠标进入h2
        ah2[i].onmouseover = function(){
            // 显示对应的p
            ap[this.index].style.display = "block";
        }
        // 鼠标离开h2
        ah2[i].onmouseout = function(){
            // 隐藏对应的p
            ap[this.index].style.display = "none";
        }
        // 鼠标在h2身上移动
        ah2[i].onmousemove = function(eve){
            // 获取事件对象
            var e = eve || window.event;
            // 设置p的位置
            // 首先，因为相对定位在大框身上，所以还需要加上当前h2距离大框的位置
            // 其次，当p显示以后，直接出现在鼠标正下方，导致鼠标离开了h2，隐藏了p，之后鼠标又出现在h2身上，显示了p，所以出现抖动
            // 解决方式，将p向右下角多移动5像素，让p不在出现在鼠标正下方
            ap[this.index].style.left = e.offsetX + this.offsetLeft + 5 + "px";
            ap[this.index].style.top = e.offsetY + this.offsetTop + 5 + "px";
        }
    }
</script>
</html>